<div class="container">
  <h1>Redis缓存监控</h1>
  
  <div class="row mb-3">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Redis状态</h5>
          <div>
            <button class="btn btn-primary btn-sm me-2" (click)="loadRedisStatus()" [disabled]="loading">
              <i class="fa fa-refresh" [class.fa-spin]="loading"></i> 刷新
            </button>
            <div class="form-check form-switch d-inline-block ms-2">
              <input class="form-check-input" type="checkbox" id="autoRefresh" [(ngModel)]="autoRefresh" (change)="toggleAutoRefresh()">
              <label class="form-check-label" for="autoRefresh">自动刷新 ({{refreshInterval}}秒)</label>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div *ngIf="loading" class="text-center py-3">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          
          <div *ngIf="!loading && redisStatus">
            <div class="alert" [ngClass]="{'alert-success': redisStatus.isEnabled, 'alert-warning': !redisStatus.isEnabled}">
              <strong>状态:</strong> {{redisStatus.status}} - {{redisStatus.message}}
            </div>
            
            <div class="row" *ngIf="redisStatus.isEnabled">
              <div class="col-md-6">
                <div class="mb-3">
                  <h6>基本信息</h6>
                  <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      连接配置 <span class="badge bg-primary">{{redisStatus.configuration}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      实例名称 <span class="badge bg-info">{{redisStatus.instanceName}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      响应延迟 <span class="badge bg-secondary">{{redisStatus.latency}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      运行时间 <span class="badge bg-dark">{{redisStatus.uptimeInDays}} 天</span>
                    </li>
                  </ul>
                </div>
                
                <div class="mb-3">
                  <h6>内存使用</h6>
                  <div class="progress mb-2">
                    <div class="progress-bar" role="progressbar" [style.width]="memoryUsagePercentage + '%'" 
                         [ngClass]="{'bg-success': memoryUsagePercentage < 70, 'bg-warning': memoryUsagePercentage >= 70 && memoryUsagePercentage < 90, 'bg-danger': memoryUsagePercentage >= 90}">
                      {{memoryUsagePercentage}}%
                    </div>
                  </div>
                  <div class="d-flex justify-content-between">
                    <small>已用: {{redisStatus.usedMemory}}</small>
                    <small>总计: {{redisStatus.maxMemory}}</small>
                  </div>
                </div>
              </div>
              
              <div class="col-md-6">
                <div class="mb-3">
                  <h6>缓存统计</h6>
                  <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      缓存命中率
                      <div class="progress" style="width: 50%;">
                        <div class="progress-bar" role="progressbar" [style.width]="hitRatePercentage + '%'" 
                             [ngClass]="{'bg-success': hitRatePercentage >= 80, 'bg-warning': hitRatePercentage >= 50 && hitRatePercentage < 80, 'bg-danger': hitRatePercentage < 50}">
                          {{hitRatePercentage}}%
                        </div>
                      </div>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      命中次数 <span class="badge bg-success">{{redisStatus.keyspaceHits}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      未命中次数 <span class="badge bg-danger">{{redisStatus.keyspaceMisses}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      连接的客户端 <span class="badge bg-primary">{{redisStatus.connectedClients}}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            
            <div class="row mt-3" *ngIf="redisStatus.isEnabled">
              <div class="col-md-12">
                <h6>键统计</h6>
                <div class="table-responsive">
                  <table class="table table-sm table-bordered">
                    <thead>
                      <tr>
                        <th>总键数</th>
                        <th>BookStore键数</th>
                        <th>客户列表键数</th>
                        <th>客户搜索键数</th>
                        <th>客户高级搜索键数</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>{{redisStatus.totalKeys}}</td>
                        <td>{{redisStatus.bookStoreKeys}}</td>
                        <td>{{redisStatus.kehuListKeys}}</td>
                        <td>{{redisStatus.kehuSearchKeys}}</td>
                        <td>{{redisStatus.kehuAdvSearchKeys}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="row mb-3">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">缓存管理</h5>
        </div>
        <div class="card-body">
          <div class="mb-3">
            <label for="patternInput" class="form-label">缓存键模式</label>
            <div class="input-group">
              <input type="text" class="form-control" id="patternInput" [(ngModel)]="clearPattern" placeholder="例如: BookStore:Kehu:*">
              <button class="btn btn-danger" [disabled]="isClearing" (click)="clearCache(clearPattern)">
                <i class="fa fa-trash" [class.fa-spin]="isClearing"></i> 清除缓存
              </button>
            </div>
            <div class="form-text">指定要清除的缓存键模式，支持通配符*</div>
          </div>
          
          <div class="mb-3">
            <button class="btn btn-warning" [disabled]="isClearing" (click)="clearKehuCache()">
              <i class="fa fa-trash" [class.fa-spin]="isClearing"></i> 清除所有客户缓存
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0">性能测试</h5>
        </div>
        <div class="card-body">
          <button class="btn btn-primary mb-3" [disabled]="perfLoading" (click)="measurePerformance()">
            <i class="fa fa-tachometer" [class.fa-spin]="perfLoading"></i> 测试Redis性能
          </button>
          
          <div *ngIf="redisPerformance && redisPerformance.isEnabled">
            <h6>基准测试结果</h6>
            <table class="table table-sm">
              <tbody>
                <tr *ngFor="let item of redisPerformance.benchmarkResults | keyvalue">
                  <th>{{item.key}}</th>
                  <td>{{item.value}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <button class="btn btn-outline-primary" [disabled]="isGeneratingData" (click)="generateTestData()">
            <i class="fa fa-database" [class.fa-spin]="isGeneratingData"></i> 生成测试数据
          </button>
          <small class="form-text text-muted">此功能仅在开发环境可用</small>
        </div>
      </div>
    </div>
  </div>
</div> 